<template>
  <div class="data-analysis">
    <div class="page-header">
      <h2>数据统计</h2>
      <div class="date-range">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDateChange"
        />
      </div>
    </div>
    
    <!-- 关键指标卡片 -->
    <el-row :gutter="20" class="metric-cards">
      <el-col :span="6">
        <el-card class="metric-card">
          <div class="metric-content">
            <div class="metric-value">{{ stats.totalPV.toLocaleString() }}</div>
            <div class="metric-label">总PV</div>
            <div class="metric-trend" :class="stats.pvTrend >= 0 ? 'up' : 'down'">
              {{ stats.pvTrend >= 0 ? '↑' : '↓' }} {{ Math.abs(stats.pvTrend) }}%
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="metric-card">
          <div class="metric-content">
            <div class="metric-value">{{ stats.totalUV.toLocaleString() }}</div>
            <div class="metric-label">总UV</div>
            <div class="metric-trend" :class="stats.uvTrend >= 0 ? 'up' : 'down'">
              {{ stats.uvTrend >= 0 ? '↑' : '↓' }} {{ Math.abs(stats.uvTrend) }}%
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="metric-card">
          <div class="metric-content">
            <div class="metric-value">{{ stats.completionRate }}%</div>
            <div class="metric-label">播放完成率</div>
            <div class="metric-trend" :class="stats.completionTrend >= 0 ? 'up' : 'down'">
              {{ stats.completionTrend >= 0 ? '↑' : '↓' }} {{ Math.abs(stats.completionTrend) }}%
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="metric-card">
          <div class="metric-content">
            <div class="metric-value">{{ stats.collectCount.toLocaleString() }}</div>
            <div class="metric-label">收藏数</div>
            <div class="metric-trend" :class="stats.collectTrend >= 0 ? 'up' : 'down'">
              {{ stats.collectTrend >= 0 ? '↑' : '↓' }} {{ Math.abs(stats.collectTrend) }}%
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-section">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>PV/UV趋势</span>
          </template>
          <div class="chart-container">
            <!-- 这里可以集成ECharts图表 -->
            <div class="chart-placeholder">PV/UV趋势图表</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>播放完成率</span>
          </template>
          <div class="chart-container">
            <div class="chart-placeholder">播放完成率图表</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 搜索热词 -->
    <el-card class="search-hotwords">
      <template #header>
        <span>搜索热词 Top 10</span>
      </template>
      <el-table :data="hotWords" v-loading="loading">
        <el-table-column type="index" label="排名" width="80" />
        <el-table-column prop="keyword" label="关键词" />
        <el-table-column prop="searchCount" label="搜索次数" width="120" />
        <el-table-column prop="trend" label="趋势" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.trend > 0 ? 'success' : 'danger'">
              {{ scope.row.trend > 0 ? '↑' : '↓' }} {{ Math.abs(scope.row.trend) }}%
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 转化漏斗 -->
    <el-card class="conversion-funnel">
      <template #header>
        <span>用户转化漏斗</span>
      </template>
      <div class="funnel-container">
        <div class="funnel-step">
          <div class="step-label">访问</div>
          <div class="step-value">100%</div>
          <div class="step-count">89,123</div>
        </div>
        <div class="funnel-arrow">↓</div>
        <div class="funnel-step">
          <div class="step-label">播放</div>
          <div class="step-value">78.3%</div>
          <div class="step-count">69,789</div>
        </div>
        <div class="funnel-arrow">↓</div>
        <div class="funnel-step">
          <div class="step-label">完成</div>
          <div class="step-value">68.5%</div>
          <div class="step-count">61,045</div>
        </div>
        <div class="funnel-arrow">↓</div>
        <div class="funnel-step">
          <div class="step-label">收藏</div>
          <div class="step-value">51.2%</div>
          <div class="step-count">45,678</div>
        </div>
        <div class="funnel-arrow">↓</div>
        <div class="funnel-step">
          <div class="step-label">分享</div>
          <div class="step-value">23.4%</div>
          <div class="step-count">20,856</div>
        </div>
      </div>
    </el-card>
    
    <!-- 热门影片排行 -->
    <el-card class="movie-ranking">
      <template #header>
        <span>热门影片排行</span>
      </template>
      <el-table :data="movieRanking" v-loading="loading">
        <el-table-column type="index" label="排名" width="80" />
        <el-table-column prop="title" label="影片标题" />
        <el-table-column prop="playCount" label="播放量" width="120" />
        <el-table-column prop="completionRate" label="完成率" width="100">
          <template #default="scope">
            {{ scope.row.completionRate }}%
          </template>
        </el-table-column>
        <el-table-column prop="collectCount" label="收藏数" width="120" />
        <el-table-column prop="trend" label="趋势" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.trend > 0 ? 'success' : 'danger'">
              {{ scope.row.trend > 0 ? '↑' : '↓' }} {{ Math.abs(scope.row.trend) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { statisticsService } from '../../services/statisticsService'

const loading = ref(false)
const dateRange = ref([])

const stats = reactive({
  totalPV: 0,
  totalUV: 0,
  completionRate: 0,
  collectCount: 0,
  pvTrend: 0,
  uvTrend: 0,
  completionTrend: 0,
  collectTrend: 0
})

const hotWords = ref([])
const movieRanking = ref([])
const conversionData = ref([])

// 加载统计数据
const loadStatistics = async () => {
  try {
    loading.value = true
    
    const params = {
      startDate: dateRange.value[0] ? dateRange.value[0].toISOString().split('T')[0] : '',
      endDate: dateRange.value[1] ? dateRange.value[1].toISOString().split('T')[0] : ''
    }
    
    const [dashboardRes, hotwordsRes, rankingRes, conversionRes] = await Promise.all([
      statisticsService.getDashboardStats(),
      statisticsService.getPopularMovies(params),
      statisticsService.getPopularMovies(params),
      statisticsService.getSystemUsage()
    ])
    
    // 更新仪表板数据
    const dashboardData = dashboardRes.data || {}
    stats.totalPV = dashboardData.totalPV || 0
    stats.totalUV = dashboardData.totalUV || 0
    stats.completionRate = dashboardData.completionRate || 0
    stats.collectCount = dashboardData.collectCount || 0
    stats.pvTrend = dashboardData.pvTrend || 0
    stats.uvTrend = dashboardData.uvTrend || 0
    stats.completionTrend = dashboardData.completionTrend || 0
    stats.collectTrend = dashboardData.collectTrend || 0
    
    // 更新热词数据
    hotWords.value = hotwordsRes.data?.keywords || []
    
    // 更新影片排行
    movieRanking.value = rankingRes.data?.movies || []
    
    // 更新转化漏斗数据
    conversionData.value = conversionRes.data?.conversion || []
    
  } catch (error) {
    console.error('加载统计数据失败:', error)
    ElMessage.error('加载统计数据失败')
  } finally {
    loading.value = false
  }
}

const handleDateChange = (dates) => {
  loadStatistics()
}

onMounted(() => {
  loadStatistics()
})

</script>

<style scoped>
.data-analysis {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #333;
}

.metric-cards {
  margin-bottom: 20px;
}

.metric-card {
  text-align: center;
}

.metric-content {
  padding: 20px;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.metric-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.metric-trend {
  font-size: 12px;
}

.metric-trend.up {
  color: #67c23a;
}

.metric-trend.down {
  color: #f56c6c;
}

.chart-section {
  margin-bottom: 20px;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 4px;
}

.chart-placeholder {
  color: #909399;
  font-size: 16px;
}

.search-hotwords,
.conversion-funnel,
.movie-ranking {
  margin-bottom: 20px;
}

.funnel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.funnel-step {
  text-align: center;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
  margin: 0 10px;
  min-width: 100px;
}

.step-label {
  font-weight: bold;
  margin-bottom: 5px;
}

.step-value {
  font-size: 18px;
  color: #409eff;
  margin-bottom: 5px;
}

.step-count {
  font-size: 14px;
  color: #666;
}

.funnel-arrow {
  font-size: 20px;
  color: #909399;
}
</style>